<template>
  <div class="floor">
        <!-- 电器，装置 -->
        <div class="w apliance">
            <div class="box_top">
                <h3>家用电器</h3>
                <div class="tab_list">
                    <ul>
                        <li><a href="#" class="style_red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端电器</a>|</li>
                    </ul>
                </div>
            </div>
            <div class="box_bottom">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <div class="col_210">
                            <ul>
                                <li><a href="#">节能减排</a></li>
                                <li><a href="#">4K电视</a></li>
                                <li><a href="#">空气净化器</a></li>
                                <li><a href="#">IH电饭煲</a></li>
                                <li><a href="#">滚筒洗衣机</a></li>
                                <li><a href="#">电热水器</a></li>
                            </ul>
                            <a href="#">
                                <img src="../upload/floor-1-1.png" alt="">
                            </a>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src="../upload/floor-1-b01.png" alt="">
                            </a>
                        </div>
                        <div class="col_221">
                            <a href="#" class="bb"><img src="../upload/floor-1-2.png" alt=""></a>
                            <a href="#"><img src="../upload/floor-1-3.png" alt=""></a>
                        </div>
                        <div class="col_220">
                            <a href="#">
                                <img src="../upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                        <div class="col_219">
                            <a href="#" class="bb"><img src="../upload/floor-1-5.png" alt=""></a>
                            <a href="#"><img src="../upload/floor-1-6.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 手机 -->
        <div class="w iphone">
            <div class="box_top">
                <h3>手机通讯</h3>
                <div class="tab_list">
                    <ul>
                        <li><a href="#" class="style_red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端电器</a>|</li>
                    </ul>
                </div>
            </div>
            <div class="box_bottom">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <div class="col_210">
                            <ul>
                                <li><a href="#">节能减排</a></li>
                                <li><a href="#">4K电视</a></li>
                                <li><a href="#">空气净化器</a></li>
                                <li><a href="#">IH电饭煲</a></li>
                                <li><a href="#">滚筒洗衣机</a></li>
                                <li><a href="#">电热水器</a></li>
                            </ul>
                            <a href="#">
                                <img src="../upload/floor-1-1.png" alt="">
                            </a>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src="../upload/floor-1-b01.png" alt="">
                            </a>
                        </div>
                        <div class="col_221">
                            <a href="#" class="bb"><img src="../upload/floor-1-2.png" alt=""></a>
                            <a href="#"><img src="../upload/floor-1-3.png" alt=""></a>
                        </div>
                        <div class="col_220">
                            <a href="#">
                                <img src="../upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                        <div class="col_219">
                            <a href="#" class="bb"><img src="../upload/floor-1-5.png" alt=""></a>
                            <a href="#"><img src="../upload/floor-1-6.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
.box_top {
    height: 30px;
    border-bottom: 2px solid #c81623;
}

.box_top h3 {
    float: left;
    font-size: 18px;
    font-weight: 400;
    color: #c81623
}

.tab_list {
    float: right;
    line-height: 30px;
}

.tab_list ul li {
    float: left;
}

.tab_list ul li a {
    margin: 0 15px;
}

.floor .w {
    margin-top: 30px;
}

.box_bottom {
    height: 361px;
}

.tab_list_item>div {
    float: left;
}

.col_210 {
    width: 210px;
    height: 361px;
    background-color: #f9f9f9;
    text-align: center;
}

.col_210 ul li {
    float: left;
    width: 85px;
    height: 34px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 34px;
    margin-right: 10px;
}

.col_210 ul {
    padding-left: 12px;
}

.col_329 {
    width: 329px;
}

.col_220 {
    width: 220px;
    border-right: 1px solid #ccc;
}

.col_219 {
    width: 219px;
}

.bb {
    display: block;
    border-bottom: 1px solid #ccc;
}
</style>